<template>
  <div ref="chart">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'Light',
    data() {
      return {
        chart: '',
        data: [],
        option: {
          title:{
            text:'PH状态'
          },
          grid: {
            left: '3%',
            top: '10%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(160,160,160,0.3)',
              }
            },
            axisLabel: {
              textStyle: {
                color: function (param, index) {
                  let myColor = ['#e63810', '#ff6b00', '#e3b61f', '#13b5b1'];
                  return myColor[index]
                },
                fontSize: 13 * 0.9,
              }
            },
            data: ['测点1', '测点2', '测点3', '测点4']
          }, {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: []
          },
          ],
          yAxis: {
            type: 'value',
            name: '单位：件',
            nameGap: 35,
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 16 * 0.9,
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(160,160,160,0.3)',
              }
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14 * 0.9,
              }
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                show: true,
                color: function (params) {
                  let myBgColor = ['rgba(230,56,16,0.2)', 'rgba(255,107,0,0.2)', 'rgba(227,182,31,0.2)', 'rgba(19,181,177,0.2)'];
                  let num = myBgColor.length;
                  return myBgColor[params.dataIndex % num]
                },
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333',
              }
            },
            barWidth: '25%',
            data: [14, 14, 14, 14]
          },
            {
              type: 'bar',
              itemStyle: {
                normal: {
                  show: true,
                  color: function (params) {
                    let myColor = ['#e63810', '#ff6b00', '#e3b61f', '#13b5b1'];
                    let num = myColor.length;
                    return myColor[params.dataIndex % num]
                  },
                  barBorderRadius: 50,
                  borderWidth: 0,
                  borderColor: '#333',
                }
              },
              barWidth: '25%',
              data: [2, 4, 7, 9]
            }
          ]
        }
      };
    },
    mounted() {
      this.chart = echarts.init(this.$refs['chart']);
      this.chart.setOption(this.option, true);
    }
  };
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
